<template>
	<view>
		<!-- 状态栏 -->
		<view class="status" :style="{ height: this.$store.state.statusHight + 'px' }"></view>
		<!-- 头部导航栏 -->
		<view class="header flex">
			<view class="item" @click="show = true">取消</view>
			<view class="title">评论</view>
			<view class="item" @click="upload">发表</view>
		</view>
        <!-- 评论内容 -->
		<view class="travel_content">
			<view class="score flex">
				<view class="header">评分</view>
				<u-rate active-color="#FA3534" inactive-color="#b2b2b2" gutter="20" v-model="score"></u-rate>
			</view>
			<view class="header">评论内容</view>
			<view class="content"><u-input type="textarea" height="240" v-model="content"></u-input></view>
		</view>
		<!-- 上传图片 -->
		<view class="upload travel_content">
			<view class="header">上传图片</view>
			<view class="uploads ">
				<u-upload
					ref="uUpload"
					:width="160"
					:height="160"
					:max-count="3"
					:action="action"
					:auto-upload="false"
					@on-error="errorbu"
					@on-success="successbu"
					@on-uploaded = "submit"
				></u-upload>
			</view>
		</view>
		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>
		<!-- 弹出层 -->
		<u-modal v-model="show"  show-cancel-button @confirm="back">
			<view class="slot-content" style="font-size: 28rpx;padding: 0 24rpx;line-height: 72rpx;">
				你将会取消该评论的发布，是否继续?
			</view>
		</u-modal>
	</view>
</template>

<script>
import { sendFoodCommments } from '../../api/foods.js'
import { utf16toEntities } from '../../utils/emjoy.js'
import { sendComments } from '../../api/store.js'
export default {
	data() {
		return {
			action: 'http://111.75.252.147:8888/app/scenic/picUpload',
			show: false,
			content: '',
			score: '',
			picture: '',
			tag: '',
			StoreParams: {
				picture:'',
				content: '',
				sid: '',
				sscore: '',
				userId: ''
			},
			foodParams: {
				 content: '',
				 picture: '',
				 rid: '',
				 shopScore: '',
				 userId: ''
			}
		};
	},
	onLoad(e) {
		if (e.tag == 0) {
			this.StoreParams.sid = e.id
		} else {
			this.foodParams.rid = e.id
		}
		this.tag = e.tag
	},
	methods: {
		// 图片上传失败
		errorbu(res) {
			this.$refs.uToast.show({
				type: 'warning',
				title: '图片上传失败'
			});
		},
		// 图片上传成功
		successbu(res) {
			this.picture =  this.picture + res.data.url + ';'
		},
		// 发布土特产评论
		 async sendStoreComment () {
			this.StoreParams.picture = this.picture.slice(0, this.picture.length -1)
			this.StoreParams.content = utf16toEntities(this.content)
			this.StoreParams.sscore = this.score
			this.StoreParams.userId = this.$store.state.userinfo.userId
			const res = await sendComments(this.StoreParams)
			if (res.statusCode ==200) {
				this.$refs.uToast.show({
					type: 'success',
					title: '发布成功'
				});
				this.back()
			} else {
				this.$refs.uToast.show({
					type: 'error',
					title: '发布失败'
				});
			}
		},
		// 提交
		submit (lists) {
			this.$refs.uToast.show({
				type: 'success',
				title: '图片上传成功'
			});
			if (this.content != '' && this.picture != '') {
				if (this.tag == 0) {
					this.sendStoreComment()
				} else {
					this.sendFoodComment()
				}
			} else {
				this.$refs.uToast.show({
					type: 'warning',
					title: '图片和内容不能为空'
				});
			}
		},
		// 发布美食评论
		async sendFoodComment () {
			this.foodParams.picture = this.picture.slice(0, this.picture.length -1)
			this.foodParams.content = utf16toEntities(this.content)
			this.foodParams.shopScore = this.score
			this.foodParams.userId = this.$store.state.userinfo.userId
			const res = await sendFoodCommments(this.foodParams)
			if (res.statusCode ==200) {
				this.$refs.uToast.show({
					type: 'success',
					title: '发布成功'
				});
				this.back()
			} else {
				this.$refs.uToast.show({
					type: 'error',
					title: '发布失败'
				});
			}
		},
		// 返回上一级菜单
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 发表
		upload() {
				// 手动上传
			this.$refs.uUpload.upload() 
		}
	}
};
</script>

<style lang="scss" scoped>
/* 头部操作栏 */
.header {
	background-color: #fff;
	padding: 0 18rpx;
	height: 92rpx;
	line-height: 92rpx;
	.item {
		width: 60rpx;
	}
	.title {
		width: 620rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bolder;
	}
}
/* 游记内容 */
.travel_content {
	margin-top: 30rpx;
	background-color: #fff;
	.header {
		border-bottom: 1rpx solid #fafafa;
	}
	.score {
			
			align-items: center;
			align-content: center;
		} 
	.content {
		padding: 12rpx;
		text-indent: 2em;
	}
}
/* 图片上传 */
.uploads {
	padding: 12rpx 24rpx;
}
</style>
